<template>
	<div>
		<ul class="aui-list aui-form-list aui-margin-b-15">
			<li class="aui-list-item" @click="getAddress(1,2,33)">
            	<div class="aui-list-item-inner">
                    <div class="aui-list-item-label">选择地区</div>
                    <div class="aui-list-item-input aui-list-item-arrow">
                        <div id="name" class="addressText" style="width: 100%;color: #757575;"> {{addFlag?'如：北京市 市辖区 昭阳区':addressDetail}} </div>
                    </div>
                </div>
            </li>
			<li class="aui-list-item menpai">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">详细地址</div>
					<div class="aui-list-item-input">
						<textarea placeholder="如：圣城街道怡景小区5栋402" id="detail-address" v-model="address"></textarea>
					</div>
				</div>
			</li>
		</ul>

	</div>
</template>

<script>
	
	import {mapActions,mapMutations} from 'vuex';
	import axios from 'axios';
	export default {
		props:{
			addFlag: {
				type: Boolean,
                default:true
			},
			getNowAddress: {
				type: Object,
				default: {}
			}
//			item: {
//              type: Object,
//              default:()=>{
//              	return {}
//              }
//          },
//          userInfomation: {
//          	type: Object,
//              default: ()=>{
//              	return {}
//              }
//          },
//          getstatusBtn: {
//          	type: Function,
//              default: () => {}
//          }
		},
		data() {
			return {
				address:'',
				addressDetail:null,
				province:null,
				city:null,
				region:null
			}
		},
		watch:{
			province(nvalue,ovalue){
				let nowAddressSinger = {};
				nowAddressSinger.province = nvalue ;
				this.setNowAddressMutationSinger(nowAddressSinger);
//				console.log('provinceId',nvalue,ovalue);
			},
			city(nvalue,ovalue){
				let nowAddressSinger = {};
				nowAddressSinger.city = nvalue ;
				this.setNowAddressMutationSinger(nowAddressSinger);
//				console.log('cityId',nvalue,ovalue);
			},
			region(nvalue,ovalue){
				let nowAddressSinger = {};
				nowAddressSinger.region = nvalue ;
				this.setNowAddressMutationSinger(nowAddressSinger);
//				console.log('region',nvalue,ovalue);
			},
			address(nvalue,ovalue){
				let nowAddressSinger = {};
				nowAddressSinger.address = nvalue ;
				this.setNowAddressMutationSinger(nowAddressSinger);
				console.log('addressDetail',nvalue,ovalue);
			},
		},
		methods:{
			...mapMutations('zx',[
				"setNowAddressMutationSinger"
			]),
			...mapActions('zx',[
				'addAddressQuicker'
			]),
			getAddressInfo(){
				if(this.getNowAddress.result && !this.addFlag){
					let arr = this.getNowAddress.result.split(" ");
					this.addressDetail = arr[0]+' '+ arr[1]+ ' '+ arr[2];
					this.address = arr[3]
					console.log(arr,'arrarrarr');
				}
				
			},
			getType(list) {
	            let arr = []
	            list && list.map((item) => {
	                arr.push({text: item.name,value: item.id})
	            })
	            return arr
	        },
			async getArea (code) {
	            let res = await axios.get(window.api.mall_base_host + '/address/getarealist?areaid=' + code)
	            return res.data.data.arealist
	        },
			async getAddress(a,b,c){
				
				let data1;
				let data2;
				let data3;
				let that = this;
				var nameEl = document.getElementById('name');
				console.log(1565)
				//首次显示获取省市区
//	            if(!this.provinceList.length){
	                data1 = await this.getArea(a);
	                data1 = this.getType(data1);
	//              console.log(data1);
	           		data2  = await this.getArea(b);
	           		data2 = this.getType(data2);
	           		data3 = await this.getArea(c);
	           		data3 = this.getType(data3);
//	            } else {
	//              province = this.provinceList
//	            }
	          console.log('省',data1);
	//          console.log('市',data2);
				this.myCity = data2;
	//          console.log('区',data3);
	            var picker = new Picker({
					data: [data1, data2, data3],
					selectedIndex: [0, 0, 0],
					title: '请选择'
				});
				this.myPicker = picker;
				picker.show();
				//确定时 将内容的显示改变
				picker.on('picker.select', function (selectedVal, selectedIndex) {
					//this传进来的是插件中的数据
	//				console.log(this.data);
					nameEl.innerText = this.data[0][selectedIndex[0]].text + ' ' + this.data[1][selectedIndex[1]].text + ' ' + this.data[2][selectedIndex[2]].text;
					that.province = this.data[0][selectedIndex[0]].value;
					that.city = this.data[1][selectedIndex[1]].value;
					that.region = this.data[2][selectedIndex[2]].value;
					console.log(that.province,that.city,that.area);
				})
	
				picker.on('picker.change', (index, selectedIndex)=> {
					var city = null;
					if(index == 0){
						this.getArea(data1[selectedIndex].value).then((res)=>{
							let arr = this.getType(res);
							this.myCity = arr;
	//						console.log(this.myCity,'city');
							picker.refillColumn(index+1, arr);
							this.getArea(arr[0].value).then((res)=>{
								let arr1 = this.getType(res);
								picker.refillColumn(index+2,arr1);
							})
						})
					}else if(index == 1){
						if(this.myCity){
							this.getArea(this.myCity[selectedIndex].value).then((res)=>{
		//						console.log(99999222)
								let arr = this.getType(res);
								picker.refillColumn(index+1, arr);
							})
						}else{
							console.log('没有change事件')
						}
					}
	//				else if(index == 2){
	//
	//				}
				});
			},
		},
		created(){
			this.getAddressInfo();
		},
		beforeCreate(){
	        let scriptFile = document.createElement('script')
	        scriptFile.setAttribute("type","text/javascript")
	        scriptFile.setAttribute("id","addAddress")
	        scriptFile.setAttribute("src",'static/script/picker.min.js')
	        document.getElementsByTagName("head")[0].appendChild(scriptFile)
	    },
	    beforeDestroy(){
	        let sciDom = document.getElementById('addAddress')
	        sciDom.parentNode.removeChild(sciDom)
	    },
	}
</script>

<style scoped="scoped">
	.addressText{
		text-align: left;
	}
	
</style>